import React,{useState,useEffect} from 'react'
import { Form, Input, Button, Checkbox,} from 'antd';
import OwnSelect from '../components/select'
export default function OwnForm(props:any) {
    const [list,setList] = useState([])
    const [options,setOption] = useState([])
    useEffect(()=>{
         setList(JSON.parse(props.propsList))
         setOption(JSON.parse(props.options))
    },[])
    const onFinish = (values: any) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    
    const InputExample = (<Input />)
    const SelectExample = (
       <OwnSelect options={options}></OwnSelect>
    )
    const CheckboxExample = (
        <Checkbox></Checkbox>
     )
     function whileElement(type:string){
        console.log(type)
        switch (type) {
            case 'input':
                return InputExample;
            case 'select':
                return SelectExample
            default:
                break;
        }
     }
  return (
    <div>
        <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
        >
            {
                list.map((item:any,index) =>{
                   return ( <Form.Item
                        key={index}
                        label={item.label}
                        name={item.name}
                    >
                        {()=>whileElement(item.type)}
                    </Form.Item>)
                })
            }
            
            <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                <Checkbox>Remember me</Checkbox>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                Submit
                </Button>
            </Form.Item>
        </Form>
    </div>
  )
}
